<template>
	<view class="about-container">
		<!-- 顶部banner -->
		<view class="banner">
			<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/shop_banner.jpg" mode="aspectFill">
			</image>
		</view>

		<!-- 关于我们 -->
		<view class="features">
			<view class="section-title">关于我们</view>
			<view class="about-item" style="padding: 3vw;">
				<view class="about-item-info">小虎点点双面复合离焦镜片是北京附属同仁医院旗下全资子公司同仁科技自主研发的镜片采用前表面多点微透境+后表面自由曲面离焦量医疗定制。</view>
				<view class="about-item-info">目前北京同仁临床数据，青少年佩戴延缓近视度数增长有效率平均达74%。能更有效的控制青少年近视度数增长。</view>
				<view class="about-item-phone">
					<view style="font-weight: bold;">客服联系电话：</view>
					<view style="font-size: 27rpx;">李老师 15010799038（每天上午9：00-下午21：00)</view>
				</view>
			</view>
		</view>

		<!-- 产品特点 -->
		<!-- <view class="features">
			<view class="section-title">产品特点</view>
			<view class="feature-list">
				<view class="feature-item">
					<view class="feature-icon">
						<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/tongren_avatar.png"
							mode="aspectFit"></image>
					</view>
					<view class="feature-text">
						<text class="feature-title">先进离焦技术</text>
						<text class="feature-desc">有效控制近视发展，提供清晰视觉体验</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">
						<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/tongren_avatar.png"
							mode="aspectFit"></image>
					</view>
					<view class="feature-text">
						<text class="feature-title">轻薄舒适</text>
						<text class="feature-desc">采用高折射率材料，镜片轻薄，佩戴舒适</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">
						<image src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/tongren_avatar.png"
							mode="aspectFit"></image>
					</view>
					<view class="feature-text">
						<text class="feature-title">防蓝光保护</text>
						<text class="feature-desc">有效过滤有害蓝光，保护眼睛健康</text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 适用人群 -->
		<!-- <view class="suitable">
			<view class="section-title">适用人群</view>
			<view class="suitable-content">
				<image
					src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/app%2Fbase%2F%E7%94%BB%E6%9D%BF%201_efee49a3707d4c52809cf99ba94d82c5.png"
					mode="aspectFill"></image>
				<view class="suitable-text">
					<text>• 青少年近视防控</text>
					<text>• 长时间使用电子设备人群</text>
					<text>• 需要清晰视觉体验的人群</text>
					<text>• 关注眼睛健康的人群</text>
				</view>
			</view>
		</view> -->

		<!-- 品牌故事 -->
		<!-- <view class="story">
			<view class="section-title">品牌故事</view>
			<view class="story-content">
				<image
					src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/app%2Fbase%2F%E7%94%BB%E6%9D%BF%201_efee49a3707d4c52809cf99ba94d82c5.png"
					mode="aspectFill"></image>
				<text>我们致力于为每一位用户提供最专业的视力解决方案，专注于离焦镜技术的研发与创新。通过不断的技术突破，我们希望帮助更多人拥有清晰、健康的视觉体验。</text>
			</view>
		</view> -->

		<!-- 联系方式 -->
		<!-- <view class="contact">
			<view class="contact-item">
				<text class="contact-title">门店地址</text>
				<text class="contact-value">北京市海淀区</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {}
	}
</script>

<style scoped>
	.about-container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.banner {
		position: relative;
		height: 300rpx;
		overflow: hidden;
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	.banner-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: #fff;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 32rpx;
		display: block;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		padding: 30rpx 20rpx 10rpx;
		position: relative;
	}

	.section-title::after {
		content: '';
		position: absolute;
		left: 20rpx;
		bottom: 0;
		width: 80rpx;
		height: 6rpx;
		background-color: #1989fa;
	}

	.features {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.feature-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.feature-item {
		display: flex;
		width: 48%;
		margin-bottom: 20rpx;
		align-items: flex-start;
	}

	.feature-icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 15rpx;
		flex-shrink: 0;
	}

	.feature-icon image {
		width: 100%;
		height: 100%;
	}

	.feature-text {
		flex: 1;
	}

	.feature-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}

	.feature-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
	}

	.suitable {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.suitable-content {
		display: flex;
		flex-wrap: wrap;
	}

	.suitable-content image {
		width: 45%;
		height: 240rpx;
		border-radius: 10rpx;
		margin-right: 15rpx;
	}

	.suitable-text {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.suitable-text text {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 15rpx;
		display: block;
	}

	.story {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.story-content {
		display: flex;
		flex-wrap: wrap;
	}

	.story-content image {
		width: 45%;
		height: 240rpx;
		border-radius: 10rpx;
		margin-right: 15rpx;
	}

	.story-content text {
		width: 50%;
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		display: flex;
		align-items: center;
	}

	.contact {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.contact-item {
		display: flex;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.contact-item:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.contact-title {
		font-size: 28rpx;
		color: #333;
		width: 140rpx;
	}

	.contact-value {
		font-size: 28rpx;
		color: #666;
		flex: 1;
	}

	.about-item {
		color: #666;
		font-size: 28rpx;
	}
	
	.about-item-info {
		margin-bottom: 20rpx;
		text-indent: 2em; /* 2个字符 */
	}

	.about-item-phone {
		font-size: 27rpx;
	}
</style>